<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="echarts.js"></script>
  <script src="axios.js"></script>
</head>
<body>
<div>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 1280px;height:800px"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '套餐预约占比'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      series: [{
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: []
      }]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    axios.get("/report/set-meal").then(resp=>{
      const data = resp.data.data;
      myChart.setOption({
        series: [{
          data: data
        }]
      });
    });

  </script>
</div>
</body>
</html>
